<template>
	<view class="page">
		
		<view class="flex-col flex-auto group_2"  v-if="info && info.orderno">
			<view class="flex-col section">
				<view class="flex-row justify-between group_3">
					<text class="font_2">订单{{info.orderno}}</text>
					<text class="font_2 text_3">{{showStatusTxt(info.status)}}</text>
				</view>
				<view class="flex-row justify-between items-center group_4">
					<view class="flex-row space-x-22">
						<image
							class="image_4"
							mode="aspectFill"
							:src="info.car_image"
						/>
						<view class="flex-col items-start group_5 space-y-17">
							<text class="font_3 text_4">{{info.car_shortname}}</text>
							<text class="car_no">{{info.car_chepai}}</text>
							<text class="font_1 text_5">{{info.car_infoname}}</text>
						</view>
					</view>
					<!-- 
					<view class="flex-row items-center section_2 space-x-9">
						<text class="font_1">车辆详情</text>
						<image
							class="shrink-0 image_5"
							mode="widthFix"
							src="/static/msg-r.png"
						/>
					</view>
					 -->
				</view>
				
				<view class="flex-row items-center group_6 space-x-10">
					<view class="flex-col flex-auto space-y-20 addr">
						<view class="space-x-14 line-wrap" @click="openGetLoc">
							<text class="dot get"></text>
							<text class="font_1">{{info.get_city_name}}</text>
							<text class="font_1">{{info.get_address}}</text>
							<image src="/static/next.png" mode="aspectFill" class="ic"></image>
						</view>
						<view class="font_1 text_6 time">{{showDate(info.starttime)}}</view>
						<view class="space-x-14 line-wrap" @click="openBackLoc">
							<text class="dot back"></text>
							<text class="font_1">{{info.back_city_name}}</text>
							<text class="font_1">{{info.back_address}}</text>
							<image src="/static/next.png" mode="aspectFill" class="ic"></image>
						</view>
						<view class="font_1 text_6 time">{{showDate(info.endtime)}}</view>
					</view>
				</view>
			    <!--  取消才有 -->
				<view class="cancel-reson" v-if="(info.status === -1 || info.status === -2) && info.cancel_info &&  info.cancel_info.reason">
					取消原因：{{info.cancel_info.reason}}
				</view>
				
			</view>
			<!-- 订单  已完成订单且评价才有  -->
			<view class="flex-col section_3" v-if="info.status === 30 && info.comment_info && info.comment_info.id">
				<text class="self-start font_2 text_8">订单评价</text>
				<view class="flex-row justify-between items-center group_7">
					<view class="flex-row items-center space-x-17">
						<image
							class="shrink-0 image_7"
							mode="aspectFill"
							:src="info.comment_info.avatar"
						/>
						<text class="font_4">{{info.comment_info.mobile}}</text>
					</view>
					<view class="flex-row space-x-5">
						<!-- i < info.comment_info.level -->
						<image
							class="star"
							:src="i < info.comment_info.level ? '/static/evastar-ed.png' : '/static/evastar-un.png'"
							v-for="(item,i) in 5"
							:key="i"
						/>
						<!-- <image
							class="star"
							:src="[  true? '/static/evastar-ed.png' : '/static/evastar-un.png']"
							v-for="(item,i) in 5"
							:key="i"
						/> -->
					</view>
				</view>
				<text class="self-start font_2 text_9">{{info.comment_info.remark}}</text>
				<text class="self-start font_5 text_10">{{showCustomDate('Y.m.d',info.comment_info.createtime)}}</text>
				<view class="text_9 font_2" style='color:#256ae5;' v-if="info.comment_info && info.comment_info.reply">
					<text class="txt">回复：</text>
					<text class="txt">{{info.comment_info.reply}}</text>
				</view>
			</view>
			
			<view class="flex-col section_4">
				<text class="self-start font_2 text_11">驾驶员信息</text>
				<view class="flex-row justify-between group_8">
					<text class="font_2 text_12">姓名</text>
					<text class="font_2">{{info.user_truename}}</text>
				</view>
				<view class="flex-row justify-between items-center group_9">
					<text class="font_2 text_13">手机号</text>
					<text class="font_4">{{info.user_mobile}}</text>
				</view>
				<view class="flex-row justify-between items-center group_9">
					<text class="font_2 text_13">身份证号</text>
					<text class="font_4">{{info.user_idcard}}</text>
				</view>
			</view>
			<view class="flex-col section view">
				<view class="flex-row justify-between items-center group_10">
					<text class="font_2">订单信息</text>
					<text class="font_4">{{info.orderno}}</text>
				</view>
				<view class="flex-row justify-between items-center group_11">
					<text class="font_2">租车基本费用</text>
					<text class="font_4">￥{{info.lease_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_11">
					<text class="font_2">基础服务费</text>
					<text class="font_4">￥{{info.base_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">车行手续费</text>
					<text class="font_4">￥{{info.service_price}}</text>
				</view>
				
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">取车费</text>
					<text class="font_4">￥{{info.get_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">还车费</text>
					<text class="font_4">￥{{info.back_price}}</text>
				</view>
				
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">租车押金</text>
					<text class="font_4">￥{{info.yajin_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">违章押金</text>
					<text class="font_4">￥{{info.weizhang_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">总计</text>
					<text class="font_4" style="color:#FF162C;">￥{{info.total_fee}}</text>
				</view>
				
				<view class="flex-row justify-between items-center group_11">
					<text class="font_2 text_14">优惠券减免</text>
					<text class="font_4 text_15">-￥{{info.coupon_price}}</text>
				</view>
				<view class="flex-row justify-between items-center group_12">
					<text class="font_2">最终支付金额</text>
					<text class="font_4" style="color:#FF162C;">￥{{info.pay_fee}}</text>
				</view>
				<!-- 
				<view class="flex-row justify-between items-center group_13">
					<text class="font_2">订单支付金额</text>
					<text class="font_4 text_16">￥5287</text>
				</view>
				<text class="self-end font_5 text_17">含车辆3000和违章2000押金</text>
				 -->
				<view class="flex-row justify-between items-center group_14" style="margin-top:0;border-top:none;">
					<text class="font_2">下单时间</text>
					<text class="font_6">{{showCustomDate('Y.m.d H:i:s',info.createtime)}}</text>
				</view>
				<!-- 按情况展示  最后一项group_15-->
				<view class="flex-row justify-between items-center group_10" v-if="info.starttime">
					<text class="font_2">取车时间</text>
					<text class="font_6">{{showCustomDate('Y.m.d H:i:s',info.starttime)}}</text>
				</view>
				<view class="flex-row justify-between items-center group_10" v-if="info.endtime">
					<text class="font_2">还车时间</text>
					<text class="font_6">{{showCustomDate('Y.m.d H:i:s',info.endtime)}}</text>
				</view>
				<view class="flex-row justify-between items-center group_10" v-if="exceedTime">
					<text class="font_2" style="color:#FF162C;">已逾期</text>
					<text class="font_6" style="color:#FF162C;">{{exceedTime}}</text>
				</view>
				<view class="flex-row justify-between items-center group_10" v-if="info.status === 20 || info.status === 30">
					<text class="font_2">是否续租</text>
					<text class="font_6">{{info.is_xuzu === 1 ? '是' : '否'}}</text>
				</view>
			    <view class="flex-row justify-between items-center group_10" v-if="info.get_userinfo">
			    	<text class="font_2">取车操作人</text>
			    	<text class="font_6">{{info.get_userinfo}}</text>
			    </view>
				<view class="flex-row justify-between items-center group_10" v-if="info.back_userinfo">
					<text class="font_2">还车操作人</text>
					<text class="font_6">{{info.back_userinfo}}</text>
				</view>
			</view>
			<view class="flex-col yajin-sec" v-if="(kouyaLog && kouyaLog.length>0) || (unfreezeLog && unfreezeLog.company_unfreeze_status === 1)">
				<view class="yajin-title">
					押金操作记录
				</view>
				<view class="yajin-con">
					<view class="item" v-for="(item,i) in kouyaLog" :key="i">
						<view class="i-title">
							<text class="k">{{`${item.type_text}${item.money}元，`}}</text>
							<text class="v" :class="[item.audit_status===2 ? 'red': '']">
							   {{item.audit_status===2 ? '审核不通过' : (item.audit_status===1 ? '审核通过': '待审核')}}
							</text>
						</view>
						<view class="i-tips">
							<!-- 发起时间：2023-05-17 15:12:21 -->
							发起时间：{{showDate(item.createtime)}}
						</view>
						<view class="i-tips" v-if="item.audit_status===2 && item.auditremark">
							驳回原因：{{item.auditremark}}
						</view>
					</view>
					<view class="item" v-if="unfreezeLog && unfreezeLog.company_unfreeze_status === 1">
						<view class="i-title">
							<text class="k">解冻已申请</text>
						</view>
						<view class="i-tips">
							<!-- 发起时间：2023-05-17 15:12:21 -->
							发起时间：{{showDate(unfreezeLog.company_unfreeze_time)}}
						</view>
					</view>
				</view>
			</view>
			<!-- 待取车-取消订单/确认取车-->
			<view class="btn-wrap justify-between" v-if="info.status === 10">
				<view class="flex-col justify-start items-center btn btn-l" @click.stop="navTo('/pages/order/cancel', { orderid: info.id })">
					<text class="font_3 btn-l-txt">取消订单</text>
				</view>
				<view class="flex-col justify-start items-center btn btn-r" @click.stop="navTo('/pages/order/msgGetcar', { orderid: info.id,car_chepai: info.car_chepai})">
					<text class="font_3 btn-r-txt">确认取车</text>
				</view>
			</view>
			<!-- 逾期  -->
			<view class="btn-wrap justify-between" v-else-if="info.status === 20">
				<view class="flex-col justify-start items-center btn btn-l" @click.stop="navTo('/pages/order/msgReturncar', { orderid: info.id })">
					<text class="font_3 btn-l-txt">资料上传</text>
				</view>
				<view class="flex-col justify-start items-center btn btn-r"  @click.stop="call(info.user_mobile)">
					<text class="font_3 btn-r-txt">联系客户</text>
				</view>
			</view>
			<!-- 完成 -->
			<safe-area bgColor="#fff" height="100rpx" v-else-if="info.status === 30">
				<template v-slot:btn>
					<view class="finish-btn-wrap align-center justify-end">
						<view class="btn" @click="showReply" v-if="info.comment_info  && ! info.comment_info.reply">
							回复评价
						</view>
						<view class="btn" @click="showRefundPop">
							退款
						</view>
						<block v-if="info.jiesuan_status===0 && info.yajin_type===1 && info.company_unfreeze_status===0">
							<view class="btn" @click="showUnfreezePop" >
								解冻
							</view>
							<view class="btn" @click="showYajinPop">
								押金扣款
							</view>	
						</block>
						<block v-else-if="info.jiesuan_status===0 && info.yajin_type===1 && info.company_unfreeze_status !==0 ">
							<view class="btn disabled" >
								已解冻
							</view>
						</block>
						
					</view>
				</template>
			</safe-area>
			<!-- 已付款取消 -->
			<safe-area bgColor="#fff" height="100rpx" v-else-if="info.status === -2">
				<template v-slot:btn>
					<view class="finish-btn-wrap align-center justify-end" style="display: flex;">
						<view class="btn" @click="showRefundPop">
							退款
						</view>
					</view>
				</template>
			</safe-area>
			
			<!-- 待取车-取消订单/确认取车、待还车-续租/资料上传 
			<view class="btn-wrap justify-between">
				<view class="flex-col justify-start items-center btn btn-l"><text class="font_3 btn-l-txt">取消订单</text></view>
				<view class="flex-col justify-start items-center btn btn-r"><text class="font_3 btn-r-txt">确认取车</text></view>
			</view>
			-->
		</view>
		
		<popup ref="replyRef" :isStopMaskHide="false">
			<view class="handle-panel flex-col">
				<textarea  maxlength="300"  placeholder="请输入回评内容" class="txtarea" v-model="reply" />
				<view class="align-center">
					<view class="btn" @tap="confirmReply">确定</view>
				</view>
			</view>
		</popup>
		<!-- 退款 -->
		<kouRefund ref="refundPopRef" @confirm="confirmRefundPop" />
		<!-- 押金扣款 -->
        <kouYajin ref="yajinPopRef" @confirm="confirmYajinPop" />
		<!-- 解冻 -->
		<popup ref="unfreezeRef" :isStopMaskHide="false">
			<view class="unfreeze-panel flex-col">
				<view class="title">
					押金扣款操作
				</view>
				<view class="con">
					<text class="txt">扣款全部完成才可以解冻剩余押金，解冻后不可再提交扣款申请。</text>
				</view>
				<view class="unfreeze-btn-wrap align-center justify-center">
					<view class="btn" @click="hideUnfreezePop">
						取消
					</view>
					<view class="btn full" @click="confirmUnfreezePop">确定</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	// watchEffect,
	reactive,
	toRefs,
	// computed,
	// watch,
	nextTick,
	ref
} from 'vue';
import { onLoad,onUnload,onShow,onPullDownRefresh } from '@dcloudio/uni-app';
import {showDate,showCustomDate, showStatusTxt,toDayHHmmss} from './js/common.js';
import kouYajin from './components/detail-kou-yajin.vue'
import kouRefund from './components/detail-kou-refund.vue'
export default defineComponent({
	methods:{
		showDate,showCustomDate, showStatusTxt,toDayHHmmss
	},
	components:{
		kouYajin,
		kouRefund,
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			id:'', //订单id
			info:{},
			timer:'',
			exceedTime:'', //俞期时间，定时
			
			comment_id:'',  //评价id
			reply:'',
			
			kouyaLog:[],  //押金扣 日志
			unfreezeLog:{}, //解冻 日志
		});
		const yajinPopRef = ref();  //押金扣款弹层
		const unfreezeRef = ref();  //解冻弹层
		const refundPopRef = ref();  //退款弹层
		onLoad(e => {
			data.id = e.id;
		});
		onShow(()=>{
			nextTick(()=>{
				getInfo();
				getkouyaLog();
			})
		})
		onPullDownRefresh(()=>{
			uni.stopPullDownRefresh();
			getInfo();
			getkouyaLog();
		})
		onUnload(()=>{
			timerClear();
		})
		const getInfo = async ()=>{
			let res = await uni.$request('order.info',{id:data.id});
			data.info = res.data;
			timerGet();
		}
		const getkouyaLog = async ()=>{
			let res = await uni.$request('order.kouya_log',{id:data.id});
			let {kouya,unfreeze} = res.data;
			data.kouyaLog = kouya;
			data.unfreezeLog = unfreeze;
		}
		//逾期说明 
		// async getOrderInfo(){
		// 	let url='index.mycollectionorder'
		// 	if(this.type === 'mang'){
		// 	   url = 'index.myboxorder'
		// 	}
		// 	let res=await this.$request(url,{id:this.id});
		// 	if(res.data && res.data.id){
		// 		this.orderId = res.data.id;
		// 		this.loaded = true;
		// 	}
		// },
		const timerClear=()=>{
			if(data.timer){
				// console.log('timerClear清空---')
				clearInterval(data.timer);
				data.timer = null;
			}
		}
		const timerGet =()=>{
			timerClear();
			const curtimestamp = Date.parse(new Date()) / 1000;
			let diff = curtimestamp - data.info.endtime
			if(data.info.status === 200 &&  diff > 0){
				// console.log('timerGet once---')
				data.exceedTime = toDayHHmmss(diff);
				data.timer = setInterval(() => {
					diff--;
					data.exceedTime = toDayHHmmss(diff)
				}, 1000);
			}
		}
		const call= (phone)=>{
			uni.makePhoneCall({
				phoneNumber: phone+'',
			})
		}
		
		const replyRef: any = ref();
		const showReply = () => {
			replyRef.value.show();
		};
		const confirmReply = async()=>{
			if(!data.reply){
				return;
			}
			replyRef.value.hide();
			const sendData={
				comment_id: data.info.comment_info.id,
				reply:data.reply,
			}
			const res = await uni.$request('order.comment_reply',sendData)
			uni.$tools.msg(res.msg);
			getInfo();
		}
		
		const openGetLoc = ()=>{
			const loc = {
				latitude: Number(data.info.get_latitude),
				longitude: Number(data.info.get_longitude),
			}
			// #ifdef MP-ALIPAY
			loc.name = data.info.get_address;
			loc.address = data.info.get_address;
			// #endif
			uni.openLocation(loc);
		}
		const openBackLoc = ()=>{
			const loc = {
				latitude: Number(data.info.back_latitude),
				longitude: Number(data.info.back_longitude),
			}
			// #ifdef MP-ALIPAY
			loc.name=data.info.back_address;
			loc.address = data.info.back_address;
			// #endif
			uni.openLocation(loc);
		}
		
		//解冻
		const showUnfreezePop = ()=>{
		    unfreezeRef.value.show();
		}
		const hideUnfreezePop = ()=>{
		    unfreezeRef.value.hide();
		}
		const confirmUnfreezePop = async()=>{
		    hideUnfreezePop();
			let res = await uni.$request('order.kouya_unfreeze',{id:data.id});
			uni.$tools.msg(res.msg);
			getInfo();
			getkouyaLog();
		}
		
		
		//押金扣款
		const showYajinPop = ()=>{
		    yajinPopRef.value.showPop();
		}
		const confirmYajinPop = async (e)=>{
		    // console.log("confirmYajinPop===",e);
			e.id = data.id;
			let res = await uni.$request('order.kouya_apply',e);
			uni.$tools.msg(res.msg);
			getkouyaLog();
			
		}
		//退款
		const showRefundPop = ()=>{
		    refundPopRef.value.showPop();
		}
		const confirmRefundPop = async (e)=>{
		    // console.log("confirmYajinPop===",e);
			e.id = data.id;
			let res = await uni.$request('order.refund_apply',e);
			uni.$tools.msg(res.msg);
			// getInfo();
		}
		
		
		
		
		const submitRef: any = ref();
		const submit = async () => {};

		return {
			...toRefs(data),
			submitRef,
			submit,
			replyRef,
			showReply,
			confirmReply,
			call,
			
			// showDate,
			// showCustomDate,
			// showStatusTxt,
			// toDayHHmmss,
			openGetLoc,
			openBackLoc,
			
			showUnfreezePop,
			hideUnfreezePop,
			confirmUnfreezePop,
			unfreezeRef,
			
			yajinPopRef,
			showYajinPop,
			confirmYajinPop,
			
			showRefundPop,
			confirmRefundPop,
			refundPopRef,
		};
	}
});

</script>

<style lang="scss">
.unfreeze-panel{
	width: 590rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 0 34rpx;
	.title{
		height: 114rpx;
		line-height: 114rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.con{
		width: 522rpx;
		height: 142rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		
	
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 38rpx;
	}
	
	.unfreeze-btn-wrap{
		height: 130rpx;
		.btn{
			width: 160rpx;
			height: 60rpx;
			border-radius: 30px;
			line-height: 60rpx;
			text-align: center;
			background: #E0E0E0;
			color:#fff;
			margin-right: 72rpx;
			&.full{
				background: #256AE5;
				margin-right: 0;
			}
		}
	}
		
}
.addr{
	.time{
		margin-left: 26rpx;
		color:#999 !important;
	}
}
.line-wrap{
	.dot{
		width: 12rpx;
		height: 12rpx;
		border-radius: 12rpx;
		// margin-right: 10rpx;
		flex-shrink: 0;
		display: inline-block;
		margin-top: 4rpx;
		&.get{
			background-color: #3E6FEF;
		}
		&.back{
			background-color: #38B910;
		}
	}

	.ic{
		margin-left: 6rpx !important;
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		display: inline-block;
	}
}
.yajin-sec{
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 0 30rpx 27rpx;
	.yajin-title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		height: 70rpx;
		line-height: 70rpx;
		margin-bottom: 10rpx;
	}
	.yajin-con{
		
		.item{
			padding-left: 30rpx;
			position: relative;
			padding-bottom: 30rpx;
			&::before{
				position: absolute;
				content: '';
				left: 0;
				top: 10rpx;
				width: 18rpx;
				height: 18rpx;
				background-color: #3E6FEF;
				border-radius: 18rpx;
			}
			&::after{
				position: absolute;
				content: '';
				top: 10rpx;
				left: 9rpx;
				width: 2rpx;
				bottom: -10rpx;
				background-color: #3E6FEF;
			}
			&:last-child{
				&::after{
					width: 0;
					background-color: transparent;
				}
			}
			
		}
		.i-title{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 37rpx;
		}
		.i-tips{
			padding: 8rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 37rpx;
		}
	}
	
}
	
.page {
	background-color: #f7f7f7;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	
	.group_2 {
		padding: 18rpx 20rpx 34rpx;
		overflow-y: auto;
		.section {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding-bottom: 27rpx;
			.cancel-reson{
				border-top: 2rpx solid #eee;
				padding: 28rpx 30rpx 5rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #256AE5;
				line-height: 36rpx;
			}
			.group_3 {
				padding: 30rpx 19rpx 30rpx 25rpx;
				border-bottom: solid 2rpx #0000000f;
				.text_3 {
					color: #256ae5;
				}
			}
			.group_4 {
				padding: 30rpx 24rpx 30rpx 35rpx;
				border-bottom: solid 2rpx #0000000f;
				.space-x-22 {
					& > view:not(:first-child),
					& > text:not(:first-child),
					& > image:not(:first-child) {
						margin-left: 22rpx;
					}
					.image_4 {
						margin-top: 5rpx;
						width: 156rpx;
						height: 70rpx;
					}
					.group_5 {
						margin-bottom: 4rpx;
						.text_4 {
							color: #333333;
							font-weight: 700;
						}
						.text_5 {
							color: #999999;
						}
						.car_no{
							margin-top: 16rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
					.space-y-17 {
						& > view:not(:first-child),
						& > text:not(:first-child),
						& > image:not(:first-child) {
							margin-top: 17rpx;
						}
					}
				}
				.section_2 {
					padding: 13rpx 16rpx;
					background-color: #f5f6f8;
					border-radius: 4rpx;
					height: 49rpx;
					.image_5 {
						width: 8rpx;
						height: 15rpx;
					}
				}
				.space-x-9 {
					& > view:not(:first-child),
					& > text:not(:first-child),
					& > image:not(:first-child) {
						margin-left: 9rpx;
					}
				}
			}
			.group_6 {
				padding: 21rpx 30rpx 21rpx;
				.image_6 {
					width: 12rpx;
					height: 55rpx;
				}
				.space-y-20 {
					& > view:not(:first-child),
					& > text:not(:first-child),
					& > image:not(:first-child) {
						margin-top: 20rpx;
					}
					.space-x-14 {
						& > view:not(:first-child),
						& > text:not(:first-child),
						& > image:not(:first-child) {
							margin-left: 14rpx;
						}
					}
				}
			}
			.space-x-10 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-left: 10rpx;
				}
			}
			.font_1 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #333333;
				word-break: break-all;
			}
			.group_10 {
				padding: 30rpx 19rpx 30rpx 30rpx;
				border-bottom: solid 2rpx #0000000f;
			}
			.group_11 {
				padding: 30rpx;
				border-bottom: solid 2rpx #0000000f;
				.text_15 {
					margin-right: 8rpx;
				}
			}
			.group_12 {
				padding: 30rpx 31rpx;
				border-bottom: solid 2rpx #0000000f;
			}
			.group_13 {
				margin-top: 30rpx;
				padding-left: 30rpx;
				padding-right: 24rpx;
				.text_16 {
					color: #ff162c;
				}
			}
			.text_17 {
				margin-right: 23rpx;
				margin-top: 10rpx;
			}
			.group_14 {
				margin-top: 29rpx;
				padding: 31rpx 19rpx 28rpx 30rpx;
				border-top: solid 2rpx #0000000f;
				border-bottom: solid 2rpx #0000000f;
			}
			.font_6 {
				font-size: 26rpx;
				font-family: PingFang;
				color: #999999;
			}
			.group_15 {
				padding: 30rpx 18rpx 30rpx 30rpx;
			}
		}
		.section_3 {
			margin-top: 24rpx;
			padding: 30rpx 24rpx 48rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			.text_8 {
				margin-left: 5rpx;
			}
			.group_7 {
				margin-top: 32rpx;
				.space-x-17 {
					& > view:not(:first-child),
					& > text:not(:first-child),
					& > image:not(:first-child) {
						margin-left: 17rpx;
					}
					.image_7 {
						width: 48rpx;
						height: 48rpx;
						border-radius: 48rpx;
					}
				}
				.space-x-5 {
					& > view:not(:first-child),
					& > text:not(:first-child),
					& > image:not(:first-child) {
						margin-left: 5rpx;
					}
					.image_8 {
						width: 44rpx;
						height: 20rpx;
					}
					.image_9 {
						width: 68rpx;
						height: 20rpx;
					}
					.star {
					  width: 20rpx;
					  height: 20rpx;
					}
				}
				
			}
			.text_9 {
				margin-left: 63rpx;
				margin-top: 16rpx;
				line-height: 34rpx;
			}
			.text_10 {
				margin-left: 63rpx;
				margin-top: 14rpx;
			}
		}
		.font_2 {
			font-size: 26rpx;
			font-family: PingFang;
			color: #333333;
		}
		.section_4 {
			margin-top: 24rpx;
			padding-top: 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			.text_11 {
				margin-left: 30rpx;
			}
			.group_8 {
				margin-top: 28rpx;
				padding: 31rpx 28rpx 28rpx;
				border-top: solid 1rpx #0000000f;
				border-bottom: solid 2rpx #0000000f;
			}
			.group_9 {
				padding: 30rpx 19rpx 30rpx 30rpx;
			}
		}
		.font_4 {
			font-size: 26rpx;
			font-family: PingFang;
			color: #333333;
		}
		.view {
			margin-top: 24rpx;
		}
		.font_5 {
			font-size: 20rpx;
			font-family: PingFang;
			color: #999999;
		}
		.button {
			margin-top: 38rpx;
			padding: 32rpx 0;
			background-color: #3e6fef;
			border-radius: 47rpx;
		}
		.font_3 {
			font-size: 32rpx;
			font-family: PingFang;
		}
		.text_18{
			color:#fff;
		}
	}
}
.finish-btn-wrap{
	height: 100rpx;
	// display: grid;
	// grid-template-columns: repeat(4,1fr);
	// grid-row-gap: 24rpx;
	padding: 0 20rpx;
	background-color: #fff;
	.btn{
		width: 164rpx;
		height: 84rpx;
		background: #3E6FEF;
		border-radius: 14rpx;
		line-height: 84rpx;
		text-align: center;
		
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-right: 24rpx;
		&:last-child{
			margin-right: 0;
		}
		&.disabled{
			background: #eee;
		}
	}
}

.btn-wrap{
	// padding: 0 20rpx;
	margin-top: 38rpx;
	.btn {
		padding: 32rpx 0;
		border-radius: 47rpx;
		width: 340rpx;
		.btn-l-txt {
			color: #3E6FEF;
		}
		.btn-r-txt{
			color:#fff;
		}
		&.btn-l{
			border:2rpx solid #3E6FEF;
		}
		&.btn-r{
			background-color: #3e6fef;
		}
	}
	.font_3 {
		font-size: 32rpx;
		font-family: PingFang;
	}
}
.handle-panel{
	width: 600rpx;
	// height: 300rpx;
	border-radius: 20rpx;
	background-color: #fff;
	padding: 30rpx;
	.txtarea{
		width: 100%;
		height: 240rpx;
		border: 2rpx solid #eee;
		line-height: 36rpx;
		color: #333;
		font-size: 28rpx;
		padding:20rpx;
	}
	.btn{
		margin-top: 20rpx;
		margin-left: auto;
		width: 100rpx;
		height: 60rpx;
		background-color: #3E6FEF;
		color: #fff;
		line-height: 60rpx;
		text-align: center;
		border-radius: 20rpx;
		font-size: 28rpx;
	}
}


</style>
